<template>
    <product-show-detail
        v-if="product.detail"
        :product="product">
    </product-show-detail>
    <wp-null-data-area
        v-else
        class="no-data"
        :null-data-msg="$t('wp-zan-wu-chan-pin-xiang-qing')"
        null-text-msg-color="rgba(0,0,0,0.6)"
    />
</template>

<script>
import ProductShowDetail from '@/components/product/common/productShowDetail.vue';
import { deviceviewSetup } from '@/setup/deviceview/deviceviewSetup.js';
import { onActivated, reactive } from 'vue';
export default {
    components: {
        ProductShowDetail
    },
    props: {
        productId: String
    },
    setup (props, ctx) {
        const product = reactive({
            loading: true,
            detail: null
        });

        const { getProductByPaid } = deviceviewSetup();

        onActivated(() => {
            if (!props.productId) {
                return;
            }
            // 通过product_id获取产品详情
            getProductByPaid({
                product_id: props.productId
            }).then((data) => {
                product.detail = data.value;
            });
        });

        return {
            getProductByPaid,
            product
        };
    }
};
</script>

<style scoped lang="scss">
.no-data {
    font-size: 13px;
    height: calc(100vh - 104px);
}
</style>
